<template>
	<div v-loading="loading">
		<div class="title1">
			<div>
				<span class="h1">基础管理</span>
				<span class="h2">员工管理</span>
			</div>
		</div>
		<div class="con">
			<div>
				<el-button type="primary" @click="newSales()">+ 新建</el-button>
				<!--<el-select v-model="value" placeholder="请选择">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>-->
				<div style="width:240px;float:right;position: relative;">
					<el-input v-model="input1" placeholder="请输入..."></el-input>
					<i class="el-icon-search" @click="search" style="position: absolute; width:40px;height:36px;right:0;top:0;color:#000;text-align:center;line-height:36px"></i>
				</div>
			</div>
			<div style="margin-top: 10px;overflow: auto;padding-bottom: 100px;">
				<el-table ref="singleTable" :data="tableData5" highlight-current-row  style="width: 100%">
					<el-table-column type="expand">
						<template slot-scope="props">
	 						<el-form>
								 <el-form-item :label="item.ExtendCaption" v-for="item in props.row.Extends" style="width:49%;float: left;" :key="item.ExtendCaption">
									<span v-if="item.ExtendDataType != '4'" >
										{{item.ExtendValue}} 
									</span>
									<span v-else>
										<el-select v-model="item.ExtendValue"   disabled multiple filterable placeholder="请选择" v-if="item.IsMulti">
													<el-option v-for="items in item.ExtendOptions" :key="items.ID" :label="items.CNName" :value="items.ID">
													</el-option>
										</el-select>
										<el-select v-model="item.ExtendValue"   disabled filterable placeholder="请选择" v-else="">
											<el-option v-for="items in item.ExtendOptions" :key="items.ID" :label="items.CNName" :value="items.ID">
											</el-option>
										</el-select>
									</span>
								</el-form-item>
							</el-form>
						</template>
					</el-table-column>
					<el-table-column label="姓名" prop="CNName">
					</el-table-column>
					<el-table-column label="电话" prop="Tel">
					</el-table-column>
					<el-table-column label="性别" prop="Gender">
					</el-table-column>
					<el-table-column label="身份证" prop="CardID">
					</el-table-column>
					<el-table-column label="上级" prop="ParentCNName">
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-dropdown trigger="click">
								<span class="el-dropdown-link"><el-button type="primary">操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
      </span>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item>
										<el-button size="small" type="primary" @click="modify(scope.row.ID)">修改</el-button>
									</el-dropdown-item>
									
									<el-dropdown-item>
										<el-button size="small" type="danger" @click.native.prevent="deleteRow(scope.row.ID)">删除</el-button>
									</el-dropdown-item>
									<el-dropdown-item>
										<el-button size="small" type="success" @click="xjxj(scope.row.ID)">新建下级</el-button>
									</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
					</el-table-column>
				</el-table>
				<div style="float: right; margin-top: 10px;margin-right: 5px;">
					<el-pagination :current-page="pageindex" @current-change="handleCurrentChange" layout="prev, pager, next" :total="leng">
					</el-pagination>
				</div>
			</div>
		</div>
		<div class="edit" v-if="dialogVisible">
			<el-dialog title="新建业务员" :visible.sync="dialogVisible" size="tiny">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="名字">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="form.tel"></el-input>
					</el-form-item>
					<el-form-item label="性别">
						<el-radio v-model="form.sex" label="1" border>男</el-radio>
						<el-radio v-model="form.sex" label="2" border>女</el-radio>
					</el-form-item>
					<!--<el-form-item label="密码">
						<el-input v-model="form.pwd" type="password"></el-input>
					</el-form-item>-->
					<el-form-item label="身份证">
						<el-input v-model="form.card"></el-input>
					</el-form-item>
					<div class="sigma-content">
						<div class="sigma-middle-line">
							<span class="sigma-line-text">自定义属性</span>
						</div>
					</div>
					<el-form-item :label="item.FieldCaption" v-for="item in Dates" :key="item.FieldCaption">
						<el-date-picker v-model="item.Value" type="date" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<!--<el-form-item :label="item.FieldName" v-for="(item,index) in Strs" :key="item.Value">
						<el-input v-model="item.Value"></el-input>
					</el-form-item>-->
					<div v-for="itemff in Strs" class="el-items1"> 
						<label class="lables">{{itemff.FieldCaption}}</label>
						<input class="input exInput" value="">
					</div>
					<el-form-item :label="item.FieldCaption" v-for="item in numbers" :key="item.Value">
						<el-input-number v-model="item.Value" controls-position="right" @change="handleChange" :min="1" :max="150"></el-input-number>
					</el-form-item>
					<el-form-item :label="itemt.FieldCaption" v-for="itemt in items" :key="itemt.ValueID">
						<el-select v-model="itemt.Value" clearable filterable multiple placeholder="请选择" v-if="itemt.IsMulti">
							<el-option v-for="item in itemt.FieldOptions" :key="item.ID" :label="item.CNName" :value="item.ID">
							</el-option>
						</el-select>
						<el-select v-model="itemt.Value" clearable filterable  placeholder="请选择" v-else>
							<el-option v-for="item in itemt.FieldOptions" :key="item.ID" :label="item.CNName" :value="item.ID">
							</el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="cancel()">取 消</el-button>
					<el-button type="primary" @click="addSales()">确 定</el-button>
				</span>
			</el-dialog>
		</div>

		<div class="edit" v-if="revise">
			<el-dialog title="修改业务员" :visible.sync="revise" size="tiny">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="名字">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="form.tel"></el-input>
					</el-form-item>
					<el-form-item label="性别">
						<el-radio v-model="form.sex" label="1" border>男</el-radio>
						<el-radio v-model="form.sex" label="2" border>女</el-radio>
					</el-form-item>
					<el-form-item label="身份证">
						<el-input v-model="form.card"></el-input>
					</el-form-item>
					<div class="sigma-content">
						<div class="sigma-middle-line">
							<span class="sigma-line-text">自定义属性</span>
						</div>
					</div>
					<el-form-item :label="item.FieldCaption" v-for="item in Dates" :key="item.FieldCaption">
						<el-date-picker v-model="item.Value" type="date" placeholder="选择日期">
						</el-date-picker>
					</el-form-item>
					<div v-for="itemff in Strs" class="el-items1"> 
						<label class="lables">{{itemff.FieldCaption}}</label>
						<input class="input exInput" value="">
					</div>
					<el-form-item :label="item.FieldCaption" v-for="item in numbers" :key="item.Value">
						<el-input-number v-model="item.Value" controls-position="right" @change="handleChange" :min="1" :max="150"></el-input-number>
					</el-form-item>
				    <el-form-item :label="itemt.FieldCaption" v-for="itemt in items" :key="itemt.ValueID">
				    	<el-select v-model="itemt.Value" clearable filterable placeholder="请选择">
							<el-option v-for="item in itemt.FieldOptions" :key="item.ID" :label="item.CNName" :value="item.ID">
							</el-option>
						</el-select>
                    </el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="cancel()">取 消</el-button>
					<el-button type="primary" @click="editSales()">确 定</el-button>
				</span>
			</el-dialog>
		</div>

		<el-dialog title="提示" :visible.sync="del" width="30%">
			<span>是否删除</span>
			<span slot="footer" class="dialog-footer">
		    <el-button @click="del = false">取 消</el-button>
		    <el-button type="primary" @click="Del()">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import api from '../../kits/api.js';
	export default {
		name: 'sales',
		data() {
			return {
				loading:false,
				strINput:[],//字符串输入
				leng:1,//页码
				revise: false, //修改弹出框
				options: [],//下拉
				value: '',//下拉的值
				form: {//表单
					name: '',
					pwd: '',
					tel: '',
					card: '',
					sex: "2",
				},
				input1: "",//输入框
				showEdit: false, //显示编辑
				currentRow: null,
				dialogVisible: false,
				tableData5: [],//列表数据
				activeName: 'first',
				datas: [], //存储数据数组
				numbers: [], //数字
				Strs: [], //字符
				Dates: [], //日期
				items: [], //列表
				id: "",//全局id
				del: false, //删除
				ParentID:"",//父级id
				openid:"",//openId
				CreateMan:"",//创建人
				CreateDate:"",//创建时间
				pageindex:0,//页码
			}
		},
		mounted: function() {
			this.salesgetlist()
		},
		methods: {
			handleChange(value) {
			},
			handleClick(tab, event) {
			},
			handleCurrentChange(val) {
				this.currentRow = val;
				this.pageindex = val
				this.loading = true
				var me = this
				me.$axios.post(api.salesgetlist, {
					"Para": {
						"ParendID": "",
						"Key": ""
					},
					"PageSize": 10,
					"PageIndex": this.pageindex-1,
					"OrderbyString": "CNName"
				}).then((res) => {
					if(res.data.isOK) {
						this.loading=false
						this.tableData5 = res.data.data.Data
						for(var i=0;i<this.tableData5.length;i++){
							for(var k =0;k<this.tableData5[i].Extends.length;k++){
								if(this.tableData5[i].Extends[k].ExtendDataType==4){
									if(this.tableData5[i].Extends[k].IsMulti){
								   		this.tableData5[i].Extends[k].ExtendValue = JSON.parse(this.tableData5[i].Extends[k].ExtendValue)
								    }else{
								    	this.tableData5[i].Extends[k].ExtendValue = this.tableData5[i].Extends[k].ExtendValue == null ? this.tableData5[i].Extends[k].ExtendValue:parseInt(this.tableData5[i].Extends[k].ExtendValue)
								    }
								}
							}
						}
						this.leng = res.data.data.Items
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading=false
							this.$message.error(res.data.msg);
						}		
					}
				});
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
						this.cancel()
					})
					.catch(_ => {});
			},
			//删除弹框
			deleteRow(id) {
				this.del = true;
				this.id = id;
			},
			
			//确定删除
			Del(){
				this.loading=true
				this.$axios.get(api.salesDel + '/' + this.id).then((res) => {
					if(res.data.isOK) {
						this.loading=false
						this.salesgetlist()
						this.del = false;
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.del = false;
							this.$message.error(res.data.msg);
						}						
					}
				})
			},
			//修改弹框
			modify(id) {
				this.Strs=[]
				this.numbers=[]
				this.Dates=[]
				this.items=[]
				this.revise = true;
				this.id = id;
				var me =  this
				//通过id获取模型
				this.$axios.get(api.salesModel + '/' + this.id).then((res) => {
					if(res.data.isOK) {
						this.form.name = res.data.data.CNName
						this.form.tel = res.data.data.Tel
						if(res.data.data.Gender =="男"){
							this.form.sex = "1"
						}else if(res.data.data.Gender=="女"){
							this.form.sex = "2"
						}
//						this.form.sex = res.data.data.Gender
						this.form.card = res.data.data.CardID
						this.ParentID = res.data.data.ParentID
						this.openid = res.data.data.openid
						this.CreateMan = res.data.data.CreateMan
						this.CreateDate = res.data.data.CreateDate
						this.datas = res.data.data.Extends	
						for(var i = 0; i < this.datas.length; i++) {
							switch(this.datas[i].DataType) {
								case 1:
									me.Strs.push(this.datas[i])
									setTimeout(function(){
										for(var j = 0;j<me.Strs.length;j++){
											$(".input").eq(j).val(me.Strs[j].Value)
										}
									},0)
									break;
								case 2:
									me.numbers.push(this.datas[i])
									break;
								case 3:
									me.Dates.push(this.datas[i])
									break;
								case 4:
									me.datas[i].Value = JSON.parse(me.datas[i].Value)||[]
									me.items.push(this.datas[i])
									break;
								default:
							}
						}
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.$message.error(res.data.msg);
						}		
					}
				})
			},
			//确定修改
			editSales() {
				for(var i = 0;i<this.Strs.length;i++){
					this.Strs[i].Value = $(".input").eq(i).val()
				}
				if(this.form.sex == "1"){
					this.form.sex = "男"
				}else if(this.form.sex == "2"){
					this.form.sex = "女"
				}
				this.loading = true
				this.$axios.post(api.salesEdit,{
				  "Extends": this.datas,
				  "ID": this.id,
				  "ParentID": this.ParentID,
				  "CNName": this.form.name,
				  "Tel": this.form.tel,
				  "Pwd": this.form.pwd,
				  "Gender": this.form.sex,
				  "openid": this.openid,
				  "CardID": this.form.card,
				  "CreateMan": this.CreateMan,
				  "CreateDate": this.CreateDate
				}).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						this.salesgetlist()
						this.datas=[]
						this.revise=false
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.revise=false
							this.$message.error(res.data.msg);
							this.loading = false
						}	
					}
				});
			},
			//获取业务员拓展
			extendsbytype() {
				var me = this
				me.$axios.post(api.extendsbytype, {
					ExtendType: 1,
					BusinessID: "",
				}).then((res) => {
					if(res.data.isOK) {
						this.datas = res.data.data
						for(var i = 0; i < this.datas.length; i++) {
							switch(this.datas[i].DataType) {
								case 1:
									me.Strs.push(this.datas[i])
									break;
								case 2:
									me.numbers.push(this.datas[i])
									break;
								case 3:
									me.Dates.push(this.datas[i])
									break;
								case 4:
									me.datas[i].Value = JSON.parse(me.datas[i].Value)||[]
									me.items.push(this.datas[i])
									break;
								default:
							}
						}
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.$message.error(res.data.msg);
						}		
					}
				});
			},
			//获取业务员列表
			salesgetlist() {
				this.loading = true
				var me = this
				this.pageindex = 0
				me.$axios.post(api.salesgetlist, {
					"Para": {
						"ParendID": "",
						"Key": ""
					},
					"PageSize": 10,
					"PageIndex": this.pageindex,
					"OrderbyString": "CNName"
				}).then((res) => {
					if(res.data.isOK) {
						this.loading=false
						this.tableData5 = res.data.data.Data
						for(var i=0;i<this.tableData5.length;i++){
							for(var k =0;k<this.tableData5[i].Extends.length;k++){
								if(this.tableData5[i].Extends[k].ExtendDataType==4){
									if(this.tableData5[i].Extends[k].IsMulti){
								   		this.tableData5[i].Extends[k].ExtendValue = JSON.parse(this.tableData5[i].Extends[k].ExtendValue)
								    }else{
								    	this.tableData5[i].Extends[k].ExtendValue = this.tableData5[i].Extends[k].ExtendValue == null ? this.tableData5[i].Extends[k].ExtendValue:parseInt(this.tableData5[i].Extends[k].ExtendValue)
								    }
								}
							}
						}
						this.leng = res.data.data.Items
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading=false
							this.$message.error(res.data.msg);
						}		
					}
				});
			},
			xjxj(id){
				this.id = id
				this.Strs = []
				this.numbers = []
				this.Dates = []
				this.items = []
				this.extendsbytype()
				this.dialogVisible = true
			},
			//新建业务员弹框
			newSales() {
				this.form.name = "";
				this.form.tel = "";
				this.form.pwd = "";
				this.form.sex = "2";
				this.form.card = "";
				this.id=""
				this.Strs = []
				this.numbers = []
				this.Dates = []
				this.items = []
				this.extendsbytype()
				this.dialogVisible = true
			},
			//取消弹框
			cancel() {
				this.datas=[]
				this.form.name = "";
				this.form.tel = "";
				this.form.pwd = "";
				this.form.sex = "2";
				this.form.card = "";
				this.Strs=[]
				this.numbers=[]
				this.Dates=[]
				this.items=[]
				this.dialogVisible = false
				this.revise = false
				
			},
			//确定添加
			addSales() {
				if(this.form.sex == "1"){
					this.form.sex = "男"
				}else if(this.form.sex == "2"){
					this.form.sex = "女"
				}
				for(var i = 0;i<this.Strs.length;i++){
					this.Strs[i].Value = $(".input").eq(i).val()
				}
				this.loading = true
				var me = this
				for(var i = 0; i < me.datas.length; i++) {
					switch(this.datas[i].DataType) {
						case 1:
							me.datas[i] = me.Strs[0]
							me.Strs.splice(0, 1)
							break;
						case 2:
							me.datas[i] = me.numbers[0]
							me.numbers.splice(0, 1)
							break;
						case 3:
							me.datas[i] = me.Dates[0]
							me.Dates.splice(0, 1)
							break;
						case 4:
							me.datas[i] = me.items[0]
							me.items.splice(0, 1)
							break;
						default:
					}
				}
				me.$axios.post(api.salesAdd, {
					"Extends": me.datas,
					"ID": "",
					"ParentID":this.id,
					"CNName": me.form.name,
					"Tel": me.form.tel,
					"Pwd": me.form.pwd,
					"Gender": me.form.sex,
					"openid": "",
					"CardID": me.form.card,
					"CreateMan": "",
					"CreateDate": ""
				}).then((res) => {
					if(res.data.isOK) {
						this.loading = false
						this.salesgetlist()
						this.cancel()
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading=false
							this.$message.error(res.data.msg);
							this.cancel()
						}			
					}
				});
			},
			//搜索
			search(){
				this.loading = true
				var me = this
				me.$axios.post(api.salesgetlist, {
					"Para": {
						"ParendID": "",
						"Key": this.input1
					},
					"PageSize": 10,
					"PageIndex": 0,
					"OrderbyString": "CNName"
				}).then((res) => {
					if(res.data.isOK) {
						this.loading=false
						this.tableData5 = res.data.data.Data
						this.leng = res.data.data.Items
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading=false
							this.$message.error(res.data.msg);
						}		
					}
				});
			}
		}
	}
</script>

<style>
	.title1 {
		width: 100%;
		padding: 15px 0;
		text-indent: 20px;
		background: #fff;
		border-bottom: 1px solid #dddee1;
	}
	
	.title1 span {
		margin-right: 10px;
	}
	
	.title1 .h1 {
		font-size: 16px;
		font-weight: 600;
	}
	
	.title1 .h2 {
		font-size: 14px;
	}
	
	.con {
		width: 100%;
		margin-top: 10px;
	}
	
	.page {
		float: right;
		margin-top: 20px;
	}
	
	.sigma-content {
		margin: 15px 0;
		text-align: center;
		background-color: #fff;
	}
	
	.sigma-middle-line:before {
		content: '';
		display: block;
		height: 1px;
		width: 100%;
		background-color: #999;
		/*颜色需与主题大背景色一致*/
		position: relative;
		top: 10px;
		/*调节线高*/
		left: 0;
	}
	
	.sigma-line-text {
		display: inline-block;
		background: #fff;
		padding: 0 18px 0 18px;
		position: relative;
		font-size: 14px;
		font-weight: 500;
	}
	
	.el-dialog__body {
		padding-bottom: 0;
	}
	
	.el-dialog__footer {
		text-align: center;
	}
	
	.edit {
		position: fixed;
		background: rgba(0, 0, 0, .5);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.el-dropdown-menu__item {
		text-align: center;
	}
	
	.el-dropdown-menu {
		min-width: 79px !important;
	}
	.sel{
		width: 100%;
			background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 1;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
	}
	.exInput{
	background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 1;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    }
    .exInput:focus{
    	border-color:#20a0ff;
    }
    .lables{
		display: inline-block;
		width: 80px;
		text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #48576a;
    line-height: 1;
    padding: 11px 12px 11px 0;
    box-sizing: border-box;
	}
	.el-items1{
		line-height: 36px;
		margin-bottom: 22px;
	}
	.el-items1:after{
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
}
</style>